<template>
  <div>
    <div style="width: 30%; height: 100%; float: left;">
      <split-pane ref="splitpane1" :triggerSize="3" orientation="Vertical"
        style="width: 100%;height: 100%;overflow: hidden;">
        <pane-item :collapsed="true" min="100px" style="height:200px;width: 100%;"><div style="width: 100%;height: 100%;background-color:#b78338;">第一个<span>初始高度200px，最小高度100px</span><button @click="collapsedItem">折叠</button></div></pane-item>
        <pane-item :collapsed="false" :span="2" min="50px" style="width: 100%;"><div style="width: 100%;height: 100%;background-color:#915c4c">第二个item中的内容<span>最小高度50px</span></div></pane-item>
        <pane-item :collapsed="false" :span="3" style="width: 100%;"><div style="width: 100%;height: 100%;background-color:#40686a;">第三个item中的内容</div></pane-item>
        <pane-item :collapsed="false" :span="3" style="width: 100%;"><div style="width: 100%;height: 100%;background-color:#bc5f6a">第四个item中的内容</div></pane-item>
      </split-pane>
    </div>
    <div style="width: 65%; height: 100%; float: right;">
      <split-pane ref="splitpane2"  :triggerSize="3"
        style="width: 100%;height: 100%;overflow: hidden;">
        <pane-item :collapsed="true" min="50px" style="height:100%;width: 100px;">
          <div style="width: 100%;height: 100%;background-color:#b78338;">第一个<span>初始宽100px，最小高度50px</span>
            <button @click="collapsedItem2(true)" v-if="!collapsed2">折叠2</button>
            <button @click="collapsedItem2(false)" v-if="collapsed2">展开2</button>
          </div>
        </pane-item>
        <pane-item :collapsed="false" :span="2" min="50px" style="height: 100%;"><div style="width: 100%;height: 100%;background-color:#915c4c">第二个item中的内容<span>最小高度50px</span></div></pane-item>
        <pane-item :collapsed="false" :span="3" style="height: 100%;"><div style="width: 100%;height: 100%;background-color:#40686a;">第三个item中的内容</div></pane-item>
        <pane-item :collapsed="false" :span="3" style="height: 100%;"><div style="width: 100%;height: 100%;background-color:#bc5f6a">第四个item中的内容</div></pane-item>
      </split-pane>        
    </div>

  </div>

</template>

<script>
import SplitPane from './SplitPane.vue';
import PaneItem from './PaneItem.vue';
export default {
    data(){
      return {
        collapsed1:false,
        collapsed2:false
      }
    },
    components:{SplitPane,PaneItem},
    methods:{
      collapsedItem(){
        if(this.$refs.splitpane1.isCollapsed(0))
        {
          this.$refs.splitpane1.expand(0);
        }else{
          this.$refs.splitpane1.collapse(0);
        }
      },
      collapsedItem2(isCollapse){
        if(isCollapse){
          this.$refs.splitpane2.collapse(0);
          this.collapsed2 = true           
        }else{
          this.$refs.splitpane2.expand(0);
          this.collapsed2 = false
        }

      }
    }
}
</script>

<style>

</style>